<template>
  <div class="container">
    <div class="bg-image">
      <a-image
          class="container_img"
          :src="bannerData?.coverImgUrl"
      />
      <div class="text_center">
        <div>
          <a-image
              width="120"
              :src="bannerData?.coverImgUrl"
              :showLoader="true"
          />
        </div>
        <div>
          <span
              style="border: 1px solid orange;color:orange;padding: 10px; border-radius: 20px;margin:10px;display: inline-block">
            <icon-heart/>
            精品歌单
          </span>
          <div>
            <p style="margin:10px;color: #E4E3E4">{{ bannerData?.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="buttonClass">
      <div style="margin: 10px" class="tag_bootom">
        <el-popover placement="right" trigger="contextmenu" v-model:visible="visible">
          <template #reference>
            <el-button style="margin-right: 16px" @click="visible=!visible">{{ name }}
              <icon-right/>
            </el-button>
          </template>
          <div class="tag_bootom_bottom" style="overflow-y: scroll;height: 300px;cursor: pointer;">
            <div v-for="(item,index) in species " @click="Kind(item,index)">
              <p :style="{color:name==item.name?'orange':''}" class="tag_bootom_bottom_p">{{ item.name }}</p>
            </div>
          </div>
        </el-popover>
      </div>
      <div class="text_bottom">
        <div class="text_bottom_p" v-for="(item,index) in hotsort" :key="item.id" :class="item.name==name?'active':''"
             @click="isactive(item,index)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div>
        <span class="cradSong">
      <div v-for="item in categoryPlaylist" :key="item.id">
      <card :src="item.coverImgUrl" :description='item.name'
            @click="$router.push( {path: '/detail' ,query: {id:item.id}})"></card>
      </div>
    </span>
    </div>
    <div style="height: 230px;"></div>
  </div>
</template>

<script setup>
import {GetsongListApi, GetHighGualityApi, GetGetHotApi, GetcatApi} from "../../../commonApi/api/index.js";
import {ref} from "vue"
import card from "~/components/card.vue"

const visible = ref(false)
const name = ref('')
const bannerData = ref({})
const species = ref([])
const hotsort = ref([])
const categoryPlaylist = ref([])
const getdata = async () => {
  const resqult = await GetHighGualityApi()
  const res = await GetsongListApi()
  const hotRes = await GetGetHotApi()
  name.value = res.sub[3].name
  hotsort.value = hotRes.tags
  bannerData.value = resqult.playlists[0]
  species.value = res.sub
  getsystematics(name.value)
}
getdata()
const getsystematics = async (name) => {
  const respones = await GetcatApi(name)
  categoryPlaylist.value = respones.playlists
}
const Kind = (item, index) => {
  visible.value = false;
  name.value = item.name
  getsystematics(name.value)
}
const isactive = (item, index) => {
  name.value = item.name
  getsystematics(name.value)
}


</script>

<style scoped lang="scss">
.container {
  padding: 0 20px;

  .bg-image {
    height: 10rem;
    position: relative;
    overflow: hidden;
    border-radius: 10px;

    .container_img {
      width: 80%;

      position: absolute;
      top: 0;
      z-index: -1;
      -webkit-filter: blur(5px);
      filter: blur(15px);
      transform: scale(3);

      .container_img {
        width: 100%;
        height: 120%;
      }
    }
  }

  .text_center {
    position: absolute;

    top: 0;
    padding: 15px 20px;
    display: flex;

    .tag_a {
      margin: 10px;
    }
  }

  .tag_bootom_bottom {
    -ms-overflow-style: none;

    .tag_bootom_bottom_p:hover {
      background: red;
    }
  }

  .tag_bootom_bottom::-webkit-scrollbar {
    width: 0 !important
  }

  .buttonClass {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .text_bottom {
      display: flex;

      .text_bottom_p {
        //background: #F2F3F5;
        padding: 10px;
        margin: 0 5px;
        cursor: pointer;
      }


    }
  }

  .cradSong {
    display: grid;
    grid-gap: 3rem;
    grid-template-columns: repeat(5, 16%);
    margin-top: 5px;
  }

  .active {
    background: #FDF5F5;
    color: red;
  }
}
</style>